﻿@model ElectrosLtdApplication.Models.HomeModel

@{
    ViewBag.Title = "Electros Ltd | Homepage";
}

<h2>@ViewBag.Message</h2>

<script type="text/javascript">
    function filtercategory() {
        if ($("#ddlCategories").val() == "") {
            alert("Please choose a category");
        }
        else {
            var param = {
                cId: $("#ddlCategories option:selected").val()
            };

            $.ajax({
                url: '@Url.Action("GetProductsByCategory")',
                type: "POST",
                datatype: "html",
                UpdateTargetId: "divCategoryResult",
                data: param,
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert("An error has occurred");
                },
                success: function (data) {
                    $('#divCategoryResult').empty();
                    $('#divCategoryResult').html(data);
                }
            });
        }
    }

    function filtername() {
        if ($("#productname").val() == "") {
            alert("Please enter a keyword");
        }
        else {
            var param = {
                keyword: $('#productname').val()
            };
            $.ajax({
                url: '@Url.Action("SearchName")',
                type: "POST",
                datatype: "html",
                UpdateTargetId: "divCategoryResult",
                data: param,
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert(errorText);
                },
                success: function (data) {
                    $('#divCategoryResult').empty();
                    $('#divCategoryResult').html(data);
                }
            });
        }
    }

    function filterprice() {
        var v1 = $("#minAmount").val();
        var v2 = $("#maxAmount").val();
        var minimum = v1.replace('€', '');
        var maximum = v2.replace('€', '');
        
        var param = {
            min: minimum,
            max: maximum
        };
        $.ajax({
            url: '@Url.Action("SearchPrice")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult",
            data: param,
            error: function(xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    function priceasc() {
        $.ajax({
            url: '@Url.Action("SortByPriceAsc")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult",
            data: null,
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    function pricedesc() {
        $.ajax({
            url: '@Url.Action("SortByPriceDesc")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult",
            data: null,
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    function dateasc() {
        $.ajax({
            url: '@Url.Action("SortByDate")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult",
            data: null,
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 1500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#minAmount").val("€" + ui.values[0]);
                $("#maxAmount").val("€" + ui.values[1]);
            }
        });
        $("#minAmount").val("€" + $("#slider-range").slider("values", 0));
        $("#maxAmount").val("€" + $("#slider-range").slider("values", 1));
    });
</script>
@*Sorting*@
    <button type="button" onclick="priceasc()">Sort by Lowest Price</button>&nbsp;
    <button type="button" onclick="pricedesc()">Sort by Highest Price</button>&nbsp;
    <button type="button" onclick="dateasc()">Sort by Date Listed</button><br /><br />

@*Search by Category*@
    @Html.Label("Category: ") <br />
    @Html.DropDownListFor(model => model.CategoryID, Model.Categories, "--Select Category--", new { id = "ddlCategories" })
    <button type="button" onclick="filtercategory()">Search by Category</button> <br /><br />

@*Search by Name*@
    @Html.Label("Product Name: ") <br />
    @Html.TextBoxFor(model => model.ProductName, new { id = "productname" })
    <button type="button" onclick="filtername()">Search by Name</button><br /><br />

@*Search by Price Range*@
    @Html.Label("Price Range: ") <br />
    <input type="text" id="minAmount" style="border:0; color:#000000; width:50px;"/>
    @Html.Label("-")&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" id="maxAmount" style="border:0; color:#000000; width:50px;"/>
    <div id="slider-range"></div><br />
    <button type="button" onclick="filterprice()">Search by Price</button><br /><br />

@*Results*@
    <div id="divCategoryResult"></div>


